基础控件的演示
<el-row :gutter="19">
  <el-col :span="20">
    <el-row :gutter="20">
      <el-col :span="3">标签</el-col>
      <el-col :span="11">二次封装的控件</el-col>
      <el-col :span="10">可以赋值</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">单行文本：</el-col>
      <el-col :span="11"><nf-text :model="model" v-bind="textMeta"></nf-text></el-col>
      <el-col :span="10"><el-input v-model="model.text"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">多行文本：</el-col>
      <el-col :span="11"><nf-area :model="model" v-bind="textAreaMeta"></nf-area></el-col>
      <el-col :span="10"><el-input v-model="model.area"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">密码：</el-col>
      <el-col :span="11"><nf-password :model="model" v-bind="passwordMeta"></nf-password></el-col>
      <el-col :span="10"><el-input v-model="model.password"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">URL：</el-col>
      <el-col :span="11"><nf-url :model="model" v-bind="urlMeta"></nf-url></el-col>
      <el-col :span="10"><el-input v-model="model.url"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">颜色：</el-col>
      <el-col :span="11"><nf-color :model="model" v-bind="colorMeta"></nf-color></el-col>
      <el-col :span="10"><el-input v-model="model.color"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">选择：</el-col>
      <el-col :span="11"><nf-autocomplete :model="model" v-bind="autocompleteMeta"></nf-autocomplete></el-col>
      <el-col :span="10"><el-input v-model="model.autocomplete"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">数字：</el-col>
      <el-col :span="11"><nf-number :model="model" v-bind="numberMeta"></nf-number></el-col>
      <el-col :span="10"><el-input v-model="model.number"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">滑块：</el-col>
      <el-col :span="11"><nf-range :model="model" v-bind="rangeMeta"></nf-range></el-col>
      <el-col :span="10"><el-input v-model="model.range"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">好评：</el-col>
      <el-col :span="11"><nf-rate :model="model" v-bind="rateMeta"></nf-rate></el-col>
      <el-col :span="10"><el-input v-model="model.rate"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">日期：</el-col>
      <el-col :span="11"><nf-date :model="model" v-bind="dateMeta"></nf-date></el-col>
      <el-col :span="10"><el-input v-model="model.date"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">日期时间：</el-col>
      <el-col :span="11"><nf-date :model="model" v-bind="datetimeMeta"></nf-date></el-col>
      <el-col :span="10"><el-input v-model="model.datetime"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">时间p：</el-col>
      <el-col :span="11"><nf-time-picker :model="model" v-bind="timePickerMeta"></nf-time-picker></el-col>
      <el-col :span="10"><el-input v-model="model.time1"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">时间s：</el-col>
      <el-col :span="11"><nf-time-select :model="model" v-bind="timeSelectMeta"></nf-time-select></el-col>
      <el-col :span="10"><el-input v-model="model.time2"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">年月：</el-col>
      <el-col :span="11"><nf-date :model="model" v-bind="monthMeta"></nf-date></el-col>
      <el-col :span="10"><el-input v-model="model.month"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">年周：</el-col>
      <el-col :span="11"><nf-week :model="model" v-bind="weekMeta"></nf-week></el-col>
      <el-col :span="10"><el-input v-model="model.week"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">年：</el-col>
      <el-col :span="11"><nf-date :model="model" v-bind="yearMeta"></nf-date></el-col>
      <el-col :span="10"><el-input v-model="model.year"></el-input></el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="3">开关：</el-col>
      <el-col :span="11"><nf-switch :model="model" v-bind="switchMeta"></nf-switch></el-col>
      <el-col :span="10"><el-input v-model="model.switch"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">选择：</el-col>
      <el-col :span="11"><nf-checkbox :model="model" v-bind="checkboxMeta"></nf-checkbox></el-col>
      <el-col :span="10"><el-input v-model="model.checkbox"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">多选：</el-col>
      <el-col :span="11"><nf-checkboxs :model="model" v-bind="checkboxsMeta"></nf-checkboxs></el-col>
      <el-col :span="10"><el-input v-model="model.checkboxs"></el-input></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="3">单选：</el-col>
      <el-col :span="11"><nf-radios :model="model" v-bind="radiosMeta"></nf-radios></el-col>
      <el-col :span="10"><el-input v-model="model.radios"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">下拉单选：</el-col>
      <el-col :span="11"><nf-select :model="model" v-bind="selectMeta"></nf-select></el-col>
      <el-col :span="10"><el-input v-model="model.select"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">下拉多选：</el-col>
      <el-col :span="11"><nf-select :model="model" v-bind="selectMeta"></nf-select></el-col>
      <el-col :span="10"><el-input v-model="model.select"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">分组单选：</el-col>
      <el-col :span="11"><nf-select-group :model="model" v-bind="selectMeta"></nf-select-group></el-col>
      <el-col :span="10"><el-input v-model="model.select"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">树状下拉：</el-col>
      <el-col :span="11"><nf-select-tree :model="model" v-bind="selectMeta"></nf-select-tree></el-col>
      <el-col :span="10"><el-input v-model="model.select"></el-input></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="3">联动：</el-col>
      <el-col :span="11"><nf-select-cascader :model="model" v-bind="selectCascaderMeta"></nf-select-cascader></el-col>
      <el-col :span="3"><el-input v-model="model.selectCascader1"></el-input></el-col>
      <el-col :span="3"><el-input v-model="model.selectCascader2"></el-input></el-col>
      <el-col :span="3"><el-input v-model="model.selectCascader3"></el-input></el-col>
    </el-row>
  </el-col>
  <el-col :span="4">
    查看 model 的值
    <div
      v-for="(item, key, index) in model"
      :key="index"
    >
      {{key}}： {{item}}
    </div>
  </el-col>
</el-row>

<el-button @click="add">自增</el-button>
